<template>
  <v-card style="height: 100%;box-shadow: none">
    <div style="font-size: 32px;margin-left: 5.5%">知识</div>

    <v-card
        class="item-card"
        v-for="(item, i) in items"
        :key="i"
		style="border: #f0f0f0 solid 0.1em; box-shadow: none"
    >
      <v-card-title style="font-size: 24px">
        {{ item.title }}

<!--        <v-menu offset-y v-if="isManager">-->
<!--          <template v-slot:activator="{ on, attrs }">-->
<!--            <v-btn color="primary" dark v-bind="attrs" v-on="on"> 操作 </v-btn>-->
<!--          </template>-->

<!--          <v-list>-->
<!--            <v-list-item @click="removepassage(item, i)">-->
<!--              <v-list-item-title>删除</v-list-item-title>-->
<!--            </v-list-item>-->
<!--            <v-list-item @click="edit(item)">-->
<!--              <v-list-item-title>编辑</v-list-item-title>-->
<!--            </v-list-item>-->
<!--          </v-list>-->
<!--        </v-menu>-->
      </v-card-title>

      <div class="card-content">
        <MetaCard
            :source="item.source"
            :pubDate="item.pubDate.substring(0, 10)"
        />
        <div class="ma-5" style="font-family: 微软雅黑">
          <v-btn
              v-if="item.extId === null"
              color="#37A0F4"
              text
              @click="goToSelf"
              style="font-family: 微软雅黑"
          >
            阅读全文
          </v-btn>
          <v-btn
              v-else
              color="#37A0F4"
              text
              @click="read(item.id)"
          ><span style="font-family: 微软雅黑">阅读全文</span></v-btn
          >
        </div>
      </div>
    </v-card>

    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination
                @input="loadknowledge"
                v-model="pageCount"
                :length="totalCount"
                :total-visible="7"
				color="error"
            ></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
import MetaCard from "@/components/views/article/MetaCard.vue";
export default {
  name: "Knowledgelist",
  components: { MetaCard },
  data: () => ({
    items: [
      {
        id: 1,
        title: "震惊,123",
        source: "UC",
        pubTime: "2077-12-12",
      },
    ],
    pageCount: 1,
    totalCount: 10,
    isManager: true,
    keyword:"",
  }),
  methods: {
    read(id){
      this.$router.push("/article/"+id);
    },
    loadknowledge() {
      this.$api.article
          .getKnowledge(this.pageCount - 1, 10,this.keyword)
          .then((res) => {
            console.log(res);
            let result = res;
            if (result.success) {
              this.items = result.data;
              this.totalCount = result.totalPage;
            } else {
              this.$Message.error("请求失败，原因：" + result.exc);
            }
          })
          .catch(function (error) {
            console.log(error);
            this.$Message.error("请求失败,出现了意料之外的错误");
          });
    },
    removepassage(item, i) {
      this.$api.article
          .delete(item.id)
          .then((res) => {
            let result = res;
            if (result.success) {
              this.items.splice(i, 1);
              this.$Message.success("删除成功");
              this.loadknowledge(this.pageCount, 5);
            } else {
              this.$Message.error("删除失败,出现了意料之外的错误");
            }
          })
          .catch(function (error) {
            console.log(error);
            this.$Message.error("请求失败,出现了意料之外的错误");
          });
    },
    edit(item) {
      this.$router.push("/manage/article/edit/" + item.id);
    },
  },
  created() {
    this.loadknowledge();
    this.isManager = this.$store.getters.isManager;
    // this.isManager = true
  },

};
</script>

<style scoped>
.item-card {
  border: #424242 solid 1px;
  width: 90%;
  left: 5%;
  margin-top: 10px;
}
.card-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
</style>
